<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="用户详情"
      :back-button="backButton"
      :right-buttons="rightButtons"
      @nav-bar-back-click="$dsxRouter.back()"
      @nav-bar-right-click="handleNavBarRightEv"
    >
    </hips-nav-bar>

    <hips-group v-if="dsx.records.length">
      <hips-cell title="名称" :value="dsx.records.at(0).get('userName')">
        <hips-icon
          name="like"
          v-show="dsx.records.at(0).getState('like')"
          slot="right-icon"
          class="hips-cell__right-icon"
        ></hips-icon>
      </hips-cell>
      <hips-cell
        title="性别"
        :value="dsx.records.at(0).get('gender')"
      ></hips-cell>
      <hips-cell
        title="位置"
        :value="dsx.records.at(0).get('location')"
      ></hips-cell>
      <hips-input
        :d-field="dsx.records.at(0).getField('description')"
      ></hips-input>
      <hips-cell
        title="初始介绍"
        :value="dsx.records.at(0).getPristineValue('description')"
      ></hips-cell>
      <hips-cell
        title="生日"
        :value="dsx.records.at(0).get('birthday')"
      ></hips-cell>
      <hips-cell title="年龄" :value="dsx.records.at(0).get('age')"></hips-cell>

      <hips-input
        v-if="added"
        :d-field="dsx.records.at(0).getField('application')"
      ></hips-input>
    </hips-group>

    <hips-button type="primary" block @click="submit">提交</hips-button>
    <hips-button type="warning" block @click="reset">重置</hips-button>

    <hips-button type="primary" block @click="addField"
      >添加一个字段</hips-button
    >
  </hips-view>
</template>

<script>
import Dsx from '@hips/plugin-dataset-vuex';

import { View, NavBar, Cell, Group, Button, Icon,Input } from '@hips/vue-ui';

export default {
  name: 'user-detail',
  data() {
    const _this = this;
    return {
      dsx: new Dsx({
        moduleName: 'user-detail',
        dataKey: 'data',
        primaryKey: 'id',
        queryFields: [
          {
            name: 'id',
          },
        ],
        fields: [
          {
            name: 'userName',
          },
          {
            name: 'gender',
          },
          {
            name: 'location',
          },
          {
            name: 'description',
            label: '自我介绍',
            type: 'text',
            placeholder: '请输入自我介绍',
            inputAlign: 'right',
          },
          {
            name: 'birthday',
          },
          {
            name: 'age',
          },
        ],
        transport: {
          retrieve: '/user/detail',
          update: '/user/update',
        },
        events: {
          beforeQuery() {
            _this.$hips.indicator.show({
              text: '加载中',
            });
          },
          loadSuccess() {
            _this.$hips.indicator.hide();
          },
          beforeSubmit() {
            _this.$hips.indicator.show({
              text: '加载中',
            });
          },
          submitSuccess() {
            _this.$hips.indicator.hide();
            _this.$hips.toast({ message: '提交成功', duration: 1400 });
            setTimeout(() => {
              _this.$dsxRouter.back();
            }, 1500);
          },
        },
      }),
      backButton: {
        showLeftArrow: true,
      },
      rightButtons: [
        {
          buttonIcon: 'like',
        },
      ],
      liked: false,
      added: false,
    };
  },
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [Group.name]: Group,
    [Icon.name]: Icon,
    [Input.name]:Input
  },
  async mounted() {
    const route = this.$dsxRouter.route();
    const recordId = route.params.id;

    this.dsx.getQueryField('id').setValue(recordId);

    this.dsx.records.query();

    await this.dsx.ready();

    const record = this.dsx.records.at(0);

    const description = record.getField('description');
    console.log('description = ', description);
  },
  methods: {
    handleNavBarRightEv() {
      if (this.liked) {
        this.dsx.records.at(0).setState('like', false);
        this.liked = false;
      } else {
        this.dsx.records.at(0).setState('like', true);
        this.liked = true;
      }
    },
    submit() {
      this.dsx.records.submit();
    },
    reset() {
      this.dsx.records.at(0).reset();
    },

    addField() {
      this.dsx.addField('application', {
        label: '应用',
        type: 'text',
        placeholder: '请输入应用',
        inputAlign: 'right',
      });

      this.added = true;

      const application = this.dsx.records.at(0).getField('application')
      console.log('application = ', application);
    },
  },
};
</script>

<style scoped></style>
